<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
.t1 :-webkit-any(*, .dummy),
.t2 :-webkit-any(:-webkit-any(.dummy, *), .dummy),
.t3 :-webkit-any(:focus, dummy) { background-color: rgb(0, 128, 0); }

#r3 { width: 10px; height: 10px }
</style>
<div id="t1">
    <div id="r1"></div>
</div>
<div id="t2">
    <div id="r2"></div>
</div>
<div id="t3">
    <div id="r3" tabIndex="1"></div>
</div>
<script>
document.body.offsetTop;

test(function() {
    assert_true(!!window.internals, "This test only works with internals exposed present");
}, "internals are exposed");

test(function() {
    assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t1.className = "t1";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, ":-webkit-any() with universal selector");

test(function() {
    assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t2.className = "t2";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Nested :-webkit-any() with universal selector");

test(function() {
    r3.focus();
    assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t3.className = "t3";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, ":-webkit-any() with universal :focus selector");
</script>
